<template>
  <div class="background animate__animated animate__fadeIn">
    <div class="container">
      <div class="info-header"><span>我的信息</span></div>
      <div class="infomation">
        <div class="avatar">
          <img
            :src="$store.state.avatarPath"
            alt=""
            width="100px"
            height="100px"
          />
          <button class="button" @click="avatarModal.visible = true">
            更换头像
          </button>
          <a-modal
            title="更改头像"
            width="300px"
            :visible="avatarModal.visible"
            :confirm-loading="avatarModal.confirmLoading"
            :destroyOnClose="true"
            @ok="handleAvatarOk"
            @cancel="handleAvatarCancel"
            okText="确认更改"
            cancelText="关闭"
          >
            <ChangeAvatar
              ref="ChangeAvatar"
              @getAvatarLoading="getAvatarLoading"
            />
          </a-modal>
        </div>
        <a-form-model
          ref="userForm"
          :model="formData"
          :rules="rules"
          :labelCol="{ span: 2 }"
          :wrapperCol="{ span: 22 }"
          labelAlign="left"
          :hideRequiredMark="true"
        >
          <a-form-model-item label="账号"> {{ id }}</a-form-model-item>
          <a-form-model-item prop="nickname" label="昵称">
            <a-input
              style="width: 215px"
              v-model="formData.nickname"
              placeholder="昵称"
            />
          </a-form-model-item>
          <a-form-model-item label="密码">
            <button
              class="button password-btn"
              @click="passwordModal.visible = true"
            >
              修改密码
            </button>
            <a-modal
              title="更改密码"
              width="300px"
              :visible="passwordModal.visible"
              :confirm-loading="passwordModal.confirmLoading"
              :destroyOnClose="true"
              @ok="handlePasswordOk"
              @cancel="handlePasswordCancel"
              okText="确认更改"
              cancelText="关闭"
            >
              <ChangePassword
                ref="ChangePassword"
                @getPasswordLoading="getPasswordLoading"
              />
            </a-modal>
          </a-form-model-item>
          <a-form-model-item label="性别">
            <a-radio-group v-model="formData.sex">
              <a-radio :value="1"> 男 </a-radio>
              <a-radio :value="2"> 女 </a-radio>
              <a-radio :value="0"> 保密 </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item
            label="出生日期"
            :labelCol="{ span: 3 }"
            :wrapperCol="{ span: 21 }"
          >
            <a-date-picker
              placeholder="请选择出生日期"
              v-model="formData.birthday"
              format="YYYY-MM-DD"
              @change="onChangeDate"
            />
          </a-form-model-item>
          <a-form-model-item
            label="电话号码"
            :labelCol="{ span: 3 }"
            :wrapperCol="{ span: 21 }"
          >
            {{ phone
            }}<button
              class="button phone-btn"
              @click="phoneModal.visible = true"
            >
              更换手机
            </button>
            <a-modal
              title="更改手机号"
              width="350px"
              :visible="phoneModal.visible"
              :confirm-loading="phoneModal.confirmLoading"
              :destroyOnClose="true"
              @ok="handlePhoneOk"
              @cancel="handlePhoneCancel"
              okText="确认更改"
              cancelText="关闭"
            >
              <ChangePhone
                ref="ChangePhone"
                @getPhoneLoading="getPhoneLoading"
              />
            </a-modal>
          </a-form-model-item>
          <a-form-model-item
            prop="signature"
            label="个性签名"
            :labelCol="{ span: 3 }"
            :wrapperCol="{ span: 21 }"
          >
            <a-textarea
              style="width: 500px"
              v-model="formData.signature"
              placeholder="写上你的个性签名吧！"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </a-form-model-item>
          <a-form-model-item>
            <button class="button save-btn" @click="save">保存</button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import requests from "./js/requests.js";
import { Input, DatePicker, Radio, Modal, FormModel } from "ant-design-vue";
import ChangeAvatar from "./ChangeAvatar/ChangeAvatar.vue";
import ChangePassword from "./ChangePassword/ChangePassword.vue";
import ChangePhone from "./ChangePhone/ChangePhone.vue";
Vue.use(Modal);
export default {
  name: "UserInfo",
  components: {
    AInput: Input,
    ADatePicker: DatePicker,
    ATextarea: Input.TextArea,
    ARadioGroup: Radio.Group,
    ARadio: Radio,
    AFormModel: FormModel,
    AFormModelItem: FormModel.Item,
    ChangeAvatar,
    ChangePassword,
    ChangePhone,
  },
  data() {
    return {
      // 对话框相关设置
      avatarModal: {
        visible: false,
        confirmLoading: false,
      },
      passwordModal: {
        visible: false,
        confirmLoading: false,
      },
      phoneModal: {
        visible: false,
        confirmLoading: false,
      },
      // 表单相关数据
      id: "",
      phone: "",
      formData: {
        nickname: "",
        sex: 0,
        birthday: null,
        signature: "",
      },
      // 表单验证规则
      rules: {
        nickname: [
          { max: 100, message: "昵称长度不能超过100个字符", trigger: "change" },
        ],
        signature: [
          {
            max: 1200,
            message: "个性签名长度不能超过1200个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  // 挂载完毕获取用户相关信息
  mounted() {
    let token = localStorage.getItem("token");
    if (token) {
      requests.getUserInfo().then((res) => {
        if (res.code == 200) {
          this.phone = res.data.phone;
          this.id = res.data.id;
          this.formData.nickname = res.data.nickname;
          this.formData.sex = res.data.sex;
          this.formData.birthday = res.data.birthday;
          this.formData.signature = res.data.signature;
          if (res.data.avatar) {
            this.$store.dispatch("setAvatarPath", res.data.avatar);
          } else {
            this.$store.dispatch("setAvatarPath", "/img/defaultAvatar.webp");
          }
          this.$store.dispatch("setNickname", res.data.nickname);
        }
      });
    }
  },
  methods: {
    // 性别单选框改变
    // onChange() {},
    // 日期选择框改变
    onChangeDate(date, dateString) {
      this.formData.birthday = dateString;
    },
    // 点击确认更改按钮上传头像
    handleAvatarOk() {
      this.$refs.ChangeAvatar.$emit("handleUpload");
    },
    handleAvatarCancel() {
      this.avatarModal.visible = false;
    },
    // 给ChangeAvatar子组件绑定的事件函数，获取ChangeAvatar子组件传来的上传头像时的状态，用来设置弹出框是否处于上传状态
    getAvatarLoading(loading) {
      // 更改确认按钮加载状态
      this.avatarModal.confirmLoading = loading;
      // 如果加载完成，则关闭对话框
      if (!loading) {
        this.avatarModal.visible = false;
      }
    },
    // 点击确认更改按钮修改密码
    handlePasswordOk() {
      this.$refs.ChangePassword.$emit("submit");
    },
    handlePasswordCancel() {
      this.passwordModal.visible = false;
    },
    // 获取更改密码所处的状态
    getPasswordLoading(loading) {
      this.passwordModal.confirmLoading = loading;
      if (!loading) {
        this.passwordModal.visible = false;
      }
    },
    // 点击确认更改按钮修改手机号
    handlePhoneOk() {
      this.$refs.ChangePhone.$emit("submit");
    },
    handlePhoneCancel() {
      this.phoneModal.visible = false;
    },
    // 获取更改手机号所处的状态
    getPhoneLoading(loading) {
      this.phoneModal.confirmLoading = loading;
      if (!loading) {
        this.phoneModal.visible = false;
      }
    },
    // 保存用户修改的基本信息
    save() {
      let that = this;
      Modal.confirm({
        title: "您确定要保存所修改的信息吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          that.$refs.userForm.validate((valid) => {
            if (valid) {
              requests.updateUserBasicInfo(that.formData).then((res) => {
                if (res.code == 200) {
                  that.$store.dispatch("setNickname", that.formData.nickname);
                  that.$message.success(res.msg);
                } else {
                  that.$message.error(res.msg);
                }
              });
            }
          });
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style scoped>
.background {
  width: 100%;
  height: 820px;
  padding-top: 5px;
  background-color: rgb(238, 238, 238);
}

.container {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  /* margin-top: 5px; */
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 5px rgb(165, 165, 165);
  /* background-color: antiquewhite; */
}

.info-header {
  height: 50px;
  border-bottom: 1px solid rgb(181, 181, 181);
}

.info-header span {
  display: inline-block;
  height: 20px;
  margin-left: 30px;
  margin-top: 15px;
  padding-left: 5px;
  border-left: 3px solid orangered;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

.infomation {
  padding: 50px 100px 0 100px;
}

.infomation div {
  margin: 10px 0;
}

.avatar img {
  /* margin: 0 auto; */
  border-radius: 5px;
}

.button {
  height: 30px;
  padding: 0px 5px;
  line-height: 30px;
  border: none;
  border-radius: 5px;
  transition: 0.3s;
}

.button:hover {
  box-shadow: 0 5px 10px rgb(0, 0, 0, 0.5);
}

.avatar button {
  margin-left: 30px;
  padding: 0px 5px;
  color: rgb(255, 255, 255);
  background-color: #2293f0;
}

.avatar button:hover {
  box-shadow: 0 5px 10px rgb(0, 0, 0, 0.5);
}

.password-btn {
  color: rgb(255, 255, 255);
  background-color: #e79600;
}

.encrypted-btn {
  color: rgb(255, 255, 255);
  background-color: #5200eb;
}

.phone-btn {
  margin-left: 12px;
  color: rgb(255, 255, 255);
  background-color: #007712;
}

.save {
  width: 100%;
}

.save-btn {
  display: block;
  padding: 0px 20px;
  margin: 0 auto;
  color: rgb(255, 255, 255);
  background-color: #db0000;
}

.personalized-signature {
  display: flex;
}
</style>